<template>
    <div>
        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <template #header>
                <div>
                    <h2>
                        考试步骤
                    </h2>
                </div>
            </template>
            <el-form :model="formInline">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="0">
                        <el-form-item label="步骤名称">
                            <el-input v-model="formInline.subject" placeholder="请输入搜索名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" :offset="0">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-divider />
            <el-table :data="filterData" stripe style="width: 100%" border row-key="objectId"
                :header-cell-style="{ backgroundColor: '#f2f2f2' }">
                <el-table-column type="index" label="序号" width="100" />
                <el-table-column label="科目" prop="subject" width="600" />
                <el-table-column label="排序" prop="sort" width="200" />
                <el-table-column label="增加子类" width="200">
                    <template #default="scope">
                        <div v-if="scope.row.parentId == '0-0'">
                            <el-button type="primary" size="small" @click="handleJump(1, scope.row)"><el-icon size="14">
                                    <CirclePlus />
                                </el-icon>增加子类 </el-button>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template #default="scope">
                        <div v-if="scope.row.parentId != '0-0'">
                            <el-button type="primary" size="small" @click="handleJump(2, scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无考试步骤" />
                </template>
            </el-table>
            <el-dialog v-model="dialogFormVisible" :title="num == 1 ? '添加子类项' : '修改步骤'" draggable>
                <ProcessForm :num="num" :Info="Info" v-if="dialogFormVisible" v-model="dialogFormVisible"/>
            </el-dialog>

        </el-card>

    </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import { cloneDeep } from 'lodash';
import { ElMessage, ElMessageBox } from 'element-plus';
import { SchoolType } from '../../types/dapao-school';
import { ProcessGet } from '../../api/dapao-process';
import ProcessForm from './components/process-form.vue';
import { ProcessType } from '../../types/dapao-process';
// 控制
const dialogFormVisible = ref(false)

const formInline = reactive({
    subject: '',
})
const tableData = ref<ProcessType[]>([])
// 获取后端数据
let res = await ProcessGet()
tableData.value = res.data.results


// 计算属性
const filterData=computed(()=>{
    let parArr=tableData.value.filter(item=>item.parentId=='0-0')
    parArr.forEach(item=>{
        item.children=tableData.value.filter(child=>child.parentId==item.objectId)
    })
    return parArr
})


const onSubmit = async () => {
    let obj = cloneDeep(formInline)
    let res = await ProcessGet(obj)
    tableData.value = res.data.results
}


//传给组件的数据
let Info = reactive({}) as ProcessType


// 控制弹窗
const num = ref<number>(1)
const handleJump = (n: number, val: ProcessType) => {

    dialogFormVisible.value = true
    num.value = n
    Info = val
}

// 删除数据
const handleDel = (i: number, val: SchoolType) => {
    console.log(i, val);

    ElMessageBox.confirm(
        '你确定要悄悄删除维修记录吗?',
        '警告提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            ElMessage({
                type: 'success',
                message: '删除成功,快跑',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '怂*,  点了不敢删',
            })
        })

}
</script>

<style scoped lang="scss">
div {
    color: #666;
}

h2 {
    color: #666;
    font-weight: bold;
    padding-left: 15px;
    border-left: 4px solid #00aeff;
    margin-bottom: 10px;
}

.pagination {
    margin-top: 15px;

}
</style>